import { QuestionCircleOutlined } from '@ant-design/icons';
import { Button, Popconfirm, message } from 'antd';
import React, { Component } from 'react';
import './index.css'

class Item extends Component {

  // 初始化状态, 鼠标划入划出初始状态
  state = {mouse:false}

  // 鼠标移入、移出回调函数
  handleMouse = (flag)=>{
    return ()=>{
      // 更新状态
      this.setState({mouse:flag})
    }
  }

  // 勾选、取消勾选某一个todo的回调
  handleCheck = (id)=>{
    return (event)=>{
      this.props.updateTodo(id, event.target.checked)
      // console.log(id, event.target.checked)
    }
  }

  // 删除某一个todo的回调
  handleDelete = (id)=>{
    return ()=>{
      this.props.deleteTodo(id)
      message.success('删除成功')
    }
  }

  render() {
    const {id, name, done} = this.props
    const {mouse} = this.state
    return (
      <li style={{backgroundColor: mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
        <label>
          <input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
          <span>{name}</span>
        </label>

        <Popconfirm
          title="删除"
          description="确定要删除数据吗?"
          okText="确定"
          cancelText="取消"
          onConfirm={this.handleDelete(id)}
          icon={<QuestionCircleOutlined style={{color: 'red'}} />}
        >
          <Button danger style={{display:mouse ? 'block' : 'none'}}>删除</Button>
        </Popconfirm>

        {/* <button danger className="btn btnDanger" onClick={this.handleDelete(id)} style={{display:mouse ? 'block' : 'none'}}>删除</button> */}
      </li>
    );
  }
}

export default Item;